<template>
  <!-- 联合巡检：异常总览 -->
  <div class="inspection-report-h bigTableStyle">
    <div class="inspection-report-index">
      <div class="fromed">
        <div class="inspection-report-return">
          <div>
            <span class="icon"></span> 异常总览
          </div>
          <div class="top-back" @click="goBack"></div>
        </div>
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="1.2rem">
          <el-row :gutter="15">
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="所属地市:" prop="time">
                    <el-select
                      v-model="formData.company"
                      placeholder="请选择所属地市"
                      :style="{width: '100%'}"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in CompanyList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.code"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="变电站名称:" prop>
                    <el-select
                      v-model="formData.substation"
                      placeholder="请选择下拉变电站"
                      :style="{width: '100%'}"
                      filterable
                      clearable
                    >
                      <el-option
                        v-for="item in SubstationList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.code"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="电压等级:" prop="source">
                    <el-select
                      v-model="formData.Voltage"
                      placeholder="请选择电压等级"
                      :style="{width: '100%'}"
                      clearable
                    >
                      <el-option
                        v-for="item in VoltageList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.code"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="巡检区域:" prop="point">
                    <el-input v-model="formData.xjqy" placeholder="请输入" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="间隔单元:" prop="point">
                    <el-input v-model="formData.jgdy" placeholder="请输入" :style="{width: '100%'}"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="巡检点位:" prop="point">
                    <el-input
                      v-model="formData.xjdw"
                      placeholder="请输入巡检点位"
                      :style="{width: '100%'}"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="8">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="巡检时间:" prop="source">
                    <el-date-picker
                      :style="{width: '100%'}"
                      v-model="formData.xjtime"
                      value-format="yyyy-MM-dd"
                      type="daterange"
                      align="right"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="识别结论:" prop="identify">
                    <el-select
                      v-model="formData.sbjl"
                      placeholder="请选择"
                      :style="{width: '100%'}"
                      clearable
                    >
                      <el-option
                        v-for="item in identifyOptions"
                        :key="item.value"
                        :label="item.name"
                        :value="item.code"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="是否处理:" prop="tcap">
                    <el-select
                      v-model="formData.sfqr"
                      placeholder="请选择是否处理"
                      :style="{width: '100%'}"
                      clearable
                    >
                      <el-option
                        v-for="item in isHandleList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.code"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="2">
              <div class="inspection-report-index-btn">
                <el-button
                  class="table-query"
                  type="primary"
                  @click="submitForm"
                  icon="el-icon-search"
                >查询</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <div class="bottom-border"></div>
          <el-button class="table-query" type="primary" @click="plhs">批量核实</el-button>
        </div>
      </div>
      <div class="tableed">
        <el-table
        border
          :data="tableData"
          height="100%"
          :row-class-name="tableRowClassName"
          style="width: 100%;height:100%;"
          @selection-change='handleSelectionChange'
        >
          <el-table-column type="selection" width="55" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="myIndex" label="序号" width="60" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="SSDSMC"  width="180" label="所属地市" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="BDZMC" width="180" label="变电站" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="DYDJ" label="电压等级" width="140" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="XJQY" label="巡检区域" width="140" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="JGDY" label="间隔单元" width="140" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="XJDW" width="180" label="巡检点位" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="XJSJ" width="160" label="巡检时间" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="XJJG" label="巡检结果" width="140" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="SBJL" label="识别结论" width="140" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="GLTX_URL" label="采集信息" width="120" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <viewer :images="[scope.row.GLTX_URL]" @inited="inited(scope.row,$event)">
                <img :src="scope.row.GLTX_URL" alt srcset v-show="false" />
                <span class="iconfont iconpicture pitcure" @click="clickEvent(scope.row)"></span>
              </viewer>
            </template>
          </el-table-column>
          <el-table-column label="人工核实" fixed="right" width="150">
            <template slot-scope="scope">
               <div v-if="scope.row.SFQR ==1">
                <el-select
                  disabled
                  v-model="scope.row.SFQR"
                  :style="{width: '100%'}"
                  @change="verify(scope,$event)"
                >
                  <el-option
                    v-for="(item, index) in verifyOption2"
                    :key="index"
                    :label="item.interval"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </div>
              <div v-else >
                <el-select
                  v-model="scope.row.SFQR"
                  :style="{width: '100%'}"
                  @change="verify(scope,$event)"
                >
                  <el-option
                    v-for="(item, index) in verifyOption"
                    :key="index"
                    :label="item.interval"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </div>
             
            </template>
          </el-table-column>
          <!-- <el-table-column label="操作" fixed="right" width="150">
            <template slot-scope="scope">
              <div>
                <el-button class="table-query" type="primary" @click="handleEdit(scope)">查看历史</el-button>
              </div>
            </template>
          </el-table-column>-->
          <el-table-column prop="SFQR1" label="是否处理" width="140" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <div>
                {{scope.row.SFQR1 | sfcl(scope.row.SFQR1)}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="USERNAME" label="处理人" width="180" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="QRSJ" label="处理时间" width="180" :show-overflow-tooltip="true">
             <template slot-scope="scope">
              <div v-if="scope.row.QRSJ">{{scope.row.QRSJ.slice(0,10)}} {{scope.row.QRSJ.slice(11,19)}}</div>
              <div v-else></div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paged elPaginationStyle">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[10, 20, 30]"
          :page-size="pages.pageSize"
          layout="total,prev, pager, next,sizes, jumper"
          :total="pages.totalSize"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      top="15vh"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <lines v-if="dialogVisible" />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import lines from "./components/line.vue";
import { JointInspectionModule } from "@/store/modules/JointInspection";
import time from '@/utils/time'
//loadsh
import lodash from "lodash";
@Component({ components: { lines } ,
filters:{
  sfcl(key){
    let name='';
    switch (key) {
      case 0:
        name='未处理'
        break;
    case 1:
        name='已处理'
        break;

      default: name='未处理'
        break;
    }
    return name
  }
}
})
export default class inspectionReportIndex extends Vue {
  // 下拉框单位名称
  get CompanyList() {
    let CompanyList = JointInspectionModule.CompanyList || [];
    return CompanyList;
  }
  // 下拉框变电站
  get SubstationList() {
    let SubstationList = JointInspectionModule.LocalCityList || [];
    console.log('SubstationList:',SubstationList);
    
    return SubstationList;
  }
  // 下拉框变电站电压等级
  get VoltageList() {
    let VoltageList = JointInspectionModule.getDydjList || [];
    return VoltageList;
  }
  // 是否处理
  private isHandleList = [
    {
      code: "",
      name: "全部",
    },
    {
      code: "0",
      name: "未处理",
    },
    {
      code: "1",
      name: "已处理",
    },
  ];
  // 识别结论
  private identifyOptions = [
    {
      code: "0",
      name: "异常",
    },
    {
      code: "1",
      name: "正常",
    },
  ];

  //搜索框from表单数据
  public formData :any= {
    company: "", // 所属地市ID
    substation: "", // 变电站ID
    Voltage: "", // 电压等级
    jgdy: "", // 间隔单元编码
    sbjl: "", // 识别结论
    sfqr: "", // 是否确认编码
    xjdw: "", // 点位名称
    xjqy: "", // 巡检区域编码
    xsfs: "", // 巡视方式编码
    xjtime: [], // 巡检时间
  };
  pickerOptions = {
    shortcuts: [
      {
        text: "最近一周",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit("pick", [start, end]);
        },
      },
      {
        text: "最近一个月",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          picker.$emit("pick", [start, end]);
        },
      },
      {
        text: "最近三个月",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          picker.$emit("pick", [start, end]);
        },
      },
    ],
  };
  // 前一个表单数据
  oldForm = {};
  jclxOptions: { [key: string]: any } = [];
  rules = {
    time: [],
    alarm: [],
    source: [],
    name: [],
  };
  $refs!: {
    elForm: any;
  };

  // 勾选的消息
  tableSelect = [];

  // 表格选择事件
  handleSelectionChange(val: any): void {
    console.log(val);
    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 1) {
      return "row1";
    } else {
      return "row2";
    }
  }

  //返回按钮
  goBack() {
    window.history.back();
  }

  // 提示消息
  private totast(msg: string) {
    this.$message({
      message: msg,
      duration: 0,
      showClose: true,
      type: "warning",
    });
  }
   // 初始化图片放大
  inited(row, viewer) {
    row.viewer = viewer;
  }
  // 录制/图像点击事件
  clickEvent(row: any) {
    // console.log(row);
    
    row.viewer.show();
  }
  // 获取选中的信息
  get newTableSelect() {
    let tableSelect = this.tableSelect;
    return tableSelect;
  }

  // 查询
  submitForm() {
    // console.log("CompanyList:",this.CompanyList)
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) return;
      // TODO 提交表单
      // console.log("this.formData:", this.formData);
      this.pages.page = 1;
      this.queryAuxRealtimeList();
    });
  }
  // 刷新
  resForm() {
    this.pages.page = 1;
    this.formData = {
      company: "", // 所属地市ID
      substation: "", // 变电站ID
      Voltage: "", // 电压等级
      jgdy: "", // 间隔单元编码
      sbjl: "", // 识别结论
      sfqr: "", // 是否确认编码
      xjdw: "", // 点位名称
      xjqy: "", // 巡检区域编码
      xsfs: "", // 巡视方式编码
      xjtime: [], // 巡检时间
    };
    this.queryAuxRealtimeList();
  }
  //table表格相关事件数据
  tableData = [
    // {
    //   BDZID: "e9382f27c38a107612526b5b310152e936ca802951",
    //   BDZMC: "220kV茂李变电站",
    //   CDSBID: null,
    //   DYDJ: "交流220kV",
    //   DYDJDM: "33",
    //   GLTX_URL: null,
    //   HJJC: null,
    //   HJJCLX: "041002",
    //   ID: "d1eb9039-7b67-402c-8ac8-cb001c98226120",
    //   JGDY: "环境监测",
    //   JGID: "600940310252",
    //   JHID: "5898fcc9-a55b-4ebf-b4fb-c81f34d639901",
    //   NUM: 1,
    //   QRSJ: null,
    //   ROOMID: "6009#4",
    //   SBID: null,
    //   SBJL: null,
    //   SBJLID: "2",
    //   SFQR: null,
    //   SFQR1: null,
    //   SSDS: "8a1ea5c64bdebad1014bdebc55c80003",
    //   SSDSMC: "国网济南供电公司",
    //   USERNAME: null,
    //   XJDW: "1#接地变室湿度",
    //   XJJG: null,
    //   XJQY: "1#接地变室",
    //   XJSJ: null,
    //   XSFS: "3",
    //   XSLX: "1",
    // },
  ];
  verify(scope: any,vul) {
    console.log(vul);
    console.log(scope.row);
    var form:any ={};
     form.id = scope.row.ID;
    form.sfqr =1;
    form.xsjg =vul;
    // form.xsfs =scope.row.XSFS;
    
    (this as any).$services
          .confirmXsbg({ data: form, method: "post", postparams: true })
          .then((result: any) => {
            console.log(result);
            this.submitForm()
          })
          .catch((err: object) => {
            console.log(err);
          });
    
  }

  //分页数据事件相关
  pages: { pageSize: number; page: number; totalSize: number } = {
    pageSize: 20,
    page: 1,
    totalSize: 0,
  };
  //   分页
  handleSizeChange(val: any) {
    // console.log(`每页 ${val} 条`);
    this.pages.pageSize = val;
    this.pages.page = 1;
    this.queryAuxRealtimeList();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.queryAuxRealtimeList();
  }

  // 监听查询条件变化
  @Watch("formData", { immediate: true, deep: true })
  setCdType(newForm) {
    let oldForm: any = this.oldForm;
    // 如果变电站id变化
    if (newForm.station !== oldForm.station) {
      // this.formData.jclx = "";
      this.queryTypes();
    }
    this.oldForm = lodash.cloneDeep(newForm);
  }

  // 查询测点类型
  queryTypes() {
    let form = this.formData;
    let params = {
      // station: form.station,
      type: "fk",
    };
    (this as any).$services
      .queryTypes({ data: params })
      .then((result: any) => {
        this.jclxOptions = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 查询当前表格数据
  queryAuxRealtimeList() {
    this.tableData = []
    // console.log("this.formData:", this.formData);
    let form = {
      bdzid: this.formData.substation, // 变电站ID
      dydj: this.formData.Voltage, // 电压等级
      jgdy: this.formData.jgdy, // 间隔单元编码
      page: this.pages.page, // 第几页
      rows: this.pages.pageSize, // 每页多少条
      sbjl: this.formData.sbjl, // 识别结论
      sfqr: this.formData.sfqr, // 是否确认编码
      ssds: this.formData.company, // 所属地市id
      xjdw: this.formData.xjdw, // 点位名称
      xjqy: this.formData.xjqy, // 巡检区域编码
      xsfs: this.formData.xsfs, // 巡视方式编码
      xskssjpre: this.formData.xjtime == null ? "" : this.formData.xjtime[0], // 巡检开始时间
      xskssjpos: this.formData.xjtime == null ? "" : this.formData.xjtime[1], // 巡检结束时间
    };
    // console.log("this.formData:",this.formData);
    // console.log("form:",form);
    (this as any).$services
      .getYcListData({ data: form, method: "get" })
      .then((result: any) => {
        console.log("result:", result);
        let data = result.data.ycjgList;
        if (data.rows && data.rows.length>0) {
          let page = this.pages.page;
          let size = this.pages.pageSize;

          data.rows.map((item,i)=>{
            if (item.XJSJ) {
              item.XJSJ=item.XJSJ.slice(0,10)
            }
            item.myIndex=(page - 1) * size + i + 1;
          })
          
          this.tableData = data.rows;
        }
        
        this.pages.totalSize = data.total;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  //table表格相关事件数据
  verifyOption = [
    {
      interval: "未核实",
      id: 0,
    },
    {
      interval: "已核实",
      id: 1,
    },
    {
      interval: "误报",
      id: 2,
    },
  ];
    verifyOption2 = [
    {
      interval: "已核实",
      id: 1,
    },
    {
      interval: "误报",
      id: 2,
    },
    {
      interval: "图数不一致",
      id: 4,
    },
    {
      interval: "无法识别",
      id: 5,
    },
  ];
  handleEdit(scope: any) {
    // console.log(scope.row);
    this.dialogVisible = true;
  }
  //弹窗相关
  dialogVisible = false;
  dialogTitle = "历史异常告警信息统计";
  handleClose() {
    this.dialogVisible = false;
  }
//批量核实
plhs(){
  if (this.tableSelect.length<1) {
     this.$message({
            type: "warning",
            message: "请选中一条或多条数据!",
          });
          return ;
  }
  var from=[];
  this.tableSelect.map(it=>{
    var obj={
      id:'',
      sbid:'',
      xsfs:''
    }
    obj.id=it.ID
    obj.sbid=it.SBID
    obj.xsfs=it.XSFS
    from.push(obj)
  });
  var froms=JSON.stringify(from);
  (this as any).$services
        .getYcConfirm({ method:'post', data: {row:froms} ,postparams:true})
        .then((result: any) => {
          console.log(result);
          if (result.code==200) {
            this.$message({
            type: "success",
            message: `${result.message}`,
          });
          }else{
            this.$message({
            type: "warning",
            message: `操作失败`,
          });
          }
          this.submitForm()

        })
        .catch((err: object) => {
          console.log(err);
        });
  

          
}
  mounted() {
    console.log("33333333333333333333:", (this as any).$route.query.yczl);
    if ((this as any).$route.query.yczl ) {
      
      this.formData.sbjl = (this as any).$route.query.yczl;
    }
    if ((this as any).$route.query.sfqr) {
      this.formData.sfqr = (this as any).$route.query.sfqr;
    }
    if ((this as any).$route.query.yczl && (this as any).$route.query.sfqr ) {
      this.formData.sbjl = this.$route.query.yczl;
      this.formData.sfqr = this.$route.query.sfqr;
    }
     this.formData.substation=this.$route.query.BDZID ||''
    // 查询表格数据
    this.queryAuxRealtimeList();
  }
}
</script>

<style lang="scss" scoped>
.inspection-report-h {
  width: 100%;
  height: 100%;
  padding: 0.24rem;
  .inspection-report-index {
    width: 100%;
    height: 100%;
    &-btn {
      display: flex;
      justify-content: flex-end;
    }
    .fromed {
      height: 210px;
      .inspection-report-return {
        height: 40px;
        display: flex;
        justify-content: space-between;
        > div {
          font-size: 0.18rem;
        }
        .icon {
          width: 0.16rem;
          height: 0.16rem;
          background: url("../../../../assets/img/JointInspection/xjjh_subtitle_icon.png")
            no-repeat center center;
          background-size: 100% 100%;
          display: inline-block;
        }
      }
      .bottom-border {
        margin-bottom: 0.1rem;
      }
    }
    .tableed {
      height: calc(100% - 270px);
    }
    .paged {
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .iconfont {
    cursor: pointer;
  }
}
</style>
<style lang="scss" scoped>
.table-query {
  width: 1.4rem;
}
</style>



